<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>案例-省市级联</title>
    
</head>

<body>
    <div>
        <select id="provinceId" style="width:150px">
            <option value="">----请-选-择-省----</option>
        </select>
        <select id="cityId" style="width:150px">
            <option value="">----请-选-择-市----</option>
        </select>
    </div>

    <!--
    省市级联
        1. 页面加载完成后自动装载省数据
        2. 当选中省时,装载该省的市数据
    循环：
        1. 普通for循环
            for(let i= 0; i<10; i++){
                需要执行的代码;
            }

        2. 增强for循环
                for(let element of array){
                    需要执行的代码;
                }
                
        3. 索引for循环
                for(let index in array){
                    需要执行的代码;
                }

        4. while循环
                while (条件表达式) {
                    需要执行的代码;
                }
                
        5. do..while循环
                do{
                    需要执行的代码;
                }while(条件表达式);
                
        6. break和continue
                break: 跳出整个循环
                continue：跳出本次循环
    -->
    <script type="text/javascript">

        // 市级列表
        let bj = ['顺义区', '海淀区', '朝阳区'];
        let hb = ["保定", "石家庄", "廊坊"];
        let ln = ["沈阳", "铁岭", "抚顺"];
        let ah = ["合肥", "安庆", "六安"];
        // 省级列表
        let provinceData = new Array() // js数组 索引也可以是string
        provinceData['北京'] = bj // 北京-bj
        provinceData['河北'] = hb
        provinceData['辽宁'] = ln
        provinceData['安徽'] = ah


        // 获取省级标签对象
        let province = document.getElementById("provinceId");
        // for in 遍历索引，添加省份名称下拉列表
        for (let index in provinceData) {
            province.innerHTML += `<option value="${index}">${index}</option>`
        }
        // onchange事件
        province.onchange = function () {
            // 获取一维数组:省份名称
            let cityData = provinceData[this.value]; // this 谁调用指向谁
            //获取市下拉列表
            let city = document.getElementById("cityId");
            // 设置市区前，要先重置
            city.innerHTML = '<option value="">请选择所在市...</option>';

            // 遍历展示
            for (let cityElement of cityData) {
                // 往city(select标签内追加option标签)
                city.innerHTML += `<option value="">${cityElement}</option>`;
            }
        }

    </script>

</body>

</html>